<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改通用物模型')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-template-edit" th:object="${iotThingsModelTemplate}">
            <input name="templateId" th:field="*{templateId}" type="hidden">
            <h4 class="form-header h4">物模型信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物模型名称：</label>
                <div class="col-sm-8">
                    <input name="templateName" th:field="*{templateName}" placeholder="请输入模型名称，例如：温度" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">编码：</label>
                <div class="col-sm-8">
                    <input name="identifier" th:field="*{identifier}" placeholder="请输入模型编码，例如：temperature" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">模型类别：</label>
                <div class="col-sm-8">
                    <select name="type" id="type" class="form-control m-b" th:with="type=${@dict.getType('iot_model_type')}" onchange="getType()">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{type}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否系统通用：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid">
                        <input type="checkbox" id="isSys" th:checked="${iotThingsModelTemplate.isSys == 1 ? true : false}" checked>
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="form-group isTop">
                <label class="col-sm-3 control-label">是否首页显示：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid">
                        <input type="checkbox" id="isTop" th:checked="${iotThingsModelTemplate.isTop == 1 ? true : false}" checked>
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="form-group isMonitor">
                <label class="col-sm-3 control-label">是否实时监测：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid">
                        <input type="checkbox" id="isMonitor" th:checked="${iotThingsModelTemplate.isMonitor == 1 ? true : false}" checked>
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
                </div>
            </div>
            <h4 class="form-header h4">物模型数据信息</h4>
            <input type="hidden" name="specs" id="specs" value="">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">数据类型：</label>
                <div class="col-sm-8">
                    <select name="datatype" id="datatype" class="form-control m-b" th:with="type=${@dict.getType('iot_model_data_type')}" onchange="getDataType()">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{datatype}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group integer decimal">
                <label class="col-sm-3 control-label ">数据范围：</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-3">
                            <input type="number" name="min" placeholder="请输入最小值" class="form-control">
                        </div>
                        <div class="col-sm-1">
                            <p class="form-control-static">至</p>
                        </div>
                        <div class="col-sm-3">
                            <input type="number" name="max" placeholder="请输入最大值" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group integer decimal">
                <label class="col-sm-3 control-label">单位：</label>
                <div class="col-sm-8">
                    <input name="unit" placeholder="请输入单位，例如：℃" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group integer">
                <label class="col-sm-3 control-label">步长：</label>
                <div class="col-sm-8">
                    <input name="step" placeholder="请输入步长，例如：1" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group bool">
                <label class="col-sm-3 control-label">布尔值：</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-8">
                            <input type="text" name="falseText" placeholder="例如：关闭" class="form-control">
                        </div>
                        <div class="col-sm-4">
                            <p class="form-control-static"><i class="fa fa-info-circle"></i>0值对应文本</p>
                        </div>
                        <div class="col-sm-8">
                            <input type="text" name="trueText" placeholder="例如：打开" class="form-control">
                        </div>
                        <div class="col-sm-4">
                            <p class="form-control-static"><i class="fa fa-info-circle"></i>1值对应文本</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group string">
                <label class="col-sm-3 control-label">字符串：</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-8">
                            <input type="number" name="maxLength" placeholder="请输入字符串长度" class="form-control">
                        </div>
                        <div class="col-sm-4">
                            <p class="form-control-static"><i class="fa fa-info-circle"></i>字符串的最大长度</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group array">
                <label class="col-sm-3 control-label">数组类型：</label>
                <div class="col-sm-8">
                    <div class="radio check-box">
                        <label>
                            <input type="radio" checked="" value="int" name="arrayType"> <i></i>int(整数)</label>
                    </div>
                    <div class="radio check-box">
                        <label>
                            <input type="radio" value="double" name="arrayType"> <i></i>double(小数)</label>
                    </div>
                    <div class="radio check-box">
                        <label>
                            <input type="radio" value="string" name="arrayType"> <i></i>string(字符串)</label>
                    </div>
                </div>
            </div>
            <div class="form-group enum">
                <label class="col-sm-3 control-label ">枚举：</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-4">
                            <input type="text" name="value" placeholder="参数值，例如：0" class="form-control">
                        </div>
                        <div class="col-sm-6">
                            <input type="text" name="text" placeholder="参数描述，例如：一档" class="form-control">
                        </div>
                        <div class="col-sm-1" id="plusEnum">
                            <a class="btn btn-white btn-bitbucket" onclick="plusEnum()">
                                <i class="fa fa-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "system/template";
        $("#form-template-edit").validate({
            focusCleanup: true
        });

        //组装物模型数据
        function sbform(){
            var specs = {};
            var value = $('#orm-template-edit').serializeArray();
            var datatype = $("#datatype").val();
            specs["type"] = datatype;
            $.each(value, function (index, item) {
                if(datatype=="integer" || datatype=="decimal"){
                    if(item.name=="min" || item.name=="max" || item.name=="unit" || item.name=="step"){
                        specs[item.name] = item.value;
                    }
                }else if (datatype=="string"){
                    if(item.name=="maxLength"){
                        specs[item.name] = item.value;
                    }
                }else if (datatype=="bool"){
                    if(item.name=="falseText" || item.name=="trueText"){
                        specs[item.name] = item.value;
                    }
                }else if (datatype=="array"){
                    if(item.name=="arrayType"){
                        specs[item.name] = item.value;
                    }
                }
            });
            if (datatype=="enum"){
                var enumList = [];
                var textArr = [];
                textArr = $("input[name='text']");
                for(var i = 0;i<textArr.length;i++){
                    var enumobj = {};
                    enumobj["text"] = $("input[name='text']")[i].value;
                    enumobj["value"] = $("input[name='value']")[i].value;
                    enumList.push(enumobj);
                }
                specs["enumList"] = enumList;
            }
            var json = JSON.stringify(specs);
            console.log('json : ',json);
            $("#specs").val(json);
        }

        function submitHandler() {
            sbform();
            if ($.validate.form()) {
                var data = $('#form-template-edit').serializeArray();
                var isTop = $("input[id='isTop']").is(':checked') == true ? 1 : 0;
                var isMonitor = $("input[id='isMonitor']").is(':checked') == true ? 1 : 0;
                data.push({"name": "isTop", "value": isTop});
                data.push({"name": "isMonitor", "value": isMonitor});
                $.operate.saveTab(prefix + "/edit", data);
            }
        }

        function getType() {
            var type = $("#type").val();
            if(type == 1){
                $(".isTop").show();
                $(".isMonitor").show();
            } else if(type == 2) {
                $(".isTop").show();
                $(".isMonitor").hide()
            }else {
                $(".isTop").hide()
                $(".isMonitor").hide()
            }
        }
        getDataType();
        function getDataType() {
        //integer、decimal、string、bool、array、enum
            var datatype = $("#datatype").val();
            if(datatype == "integer"){
                $(".integer").show();
                $(".string").hide();$(".bool").hide();$(".array").hide();$(".enum").hide();
            } else if(datatype == "decimal") {
                $(".decimal").show();
                $(".string").hide();$(".bool").hide();$(".array").hide();$(".enum").hide();
            } else if(datatype == "string") {
                $(".string").show();
                $(".integer").hide();$(".bool").hide();$(".array").hide();$(".enum").hide();
            } else if(datatype == "bool") {
                $(".bool").show();
                $(".integer").hide();$(".string").hide();$(".array").hide();$(".enum").hide();
            } else if(datatype == "array") {
                $(".array").show();
                $(".integer").hide();$(".string").hide();$(".bool").hide();$(".enum").hide();
            } else if(datatype == "enum") {
                $(".enum").show();
                $(".integer").hide();$(".string").hide();$(".bool").hide();$(".array").hide();
            }else {
                $(".integer").hide();$(".string").hide();$(".bool").hide();$(".array").hide();$(".enum").show();
            }
        }

        var deli = 0;
        function plusEnum(){
            deli++;
            var htmlStr = '<div class="col-sm-4 delEnum'+deli+'"><input type="number" name="value" placeholder="参数值，例如：0" class="form-control"></div><div class="col-sm-6 delEnum'+deli+'"><input type="text" name="text" placeholder="参数描述，例如：一档" class="form-control"></div>'
                        +'<div class="col-sm-1 delEnum'+deli+'"><a class="btn btn-white btn-bitbucket" onclick="delEnum(\'delEnum'+deli+'\')"><i class="fa fa-minus"></i></a></div>';
            $("#plusEnum").before(htmlStr);
        }
        function delEnum(deli){
            $("."+deli).remove();
        }
    </script>
</body>
</html>